<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-11 16:13:26
-->
<template>
  <div class="my_page">
    <div class="user_info">
      <div class="user_base">
        <van-image
          round
          width="1.5rem"
          height="1.5rem"
          :src="user ? user.headUrl : ''"
        />
        <div class="txt">
          <div class="user_nick">{{ user ? user.nick : "登录/注册" }}</div>
          <div class="useracc">财乎号:{{ user ? user.userAcc : "" }}</div>
        </div>
      </div>

      <div class="card_title">
        财乎会员卡
        <span v-if="user">{{ user.levelName }}</span>
        <span v-if="user">{{ user.levelSubName }}</span>
      </div>
      <div class="overtime">有效期:{{ endTime?endTime:'--' }}</div>
      <div
        class="open_btn"
        v-if="user && user.vipStatus > 0"
        v-login="handleOpenVip"
      >
        续费会员
      </div>
      <div
        class="open_btn"
        v-if="!user || user.vipStatus < 0"
        v-login="handleOpenVip"
      >
        开通会员
      </div>

      <img src="../../assets/img/bg_my_vip.png" />
    </div>
    <van-grid :gutter="0" :column-num="4" :border="false">
      <van-grid-item>
        <div class="nav_item" @click="handleNav('/live')">
          <van-badge content="Hot">
            <img src="../../assets/img/live.png" alt="" srcset="" />
          </van-badge>
          <div class="nav_title">精彩直播</div>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div class="nav_item" @click="handleNav('/article')">
          <van-badge>
            <img src="../../assets/img/article.png" alt="" srcset="" />
          </van-badge>
          <div class="nav_title">热点资讯</div>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div class="nav_item" @click="handleNav('/crouse')">
          <van-badge>
            <img src="../../assets/img/ck.png" alt="" srcset="" />
          </van-badge>
          <div class="nav_title">热门课程</div>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div class="nav_item" v-login="'/ques'">
          <img src="../../assets/img/ques.png" alt="" srcset="" />
          <div class="nav_title">提问</div>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div class="nav_item" v-login="'/invite'">
          <img src="../../assets/img/hb.png" alt="" srcset="" />
          <div class="nav_title">邀请有奖</div>
        </div>
      </van-grid-item>
      <!-- <van-grid-item>
        <div class="nav_item">
          <van-badge content="New">
          <img src="../../assets/img/dh.png"  alt="" srcset="" />
          </van-badge>
          <div class="nav_title">积分兑换</div>
        </div>
      </van-grid-item> -->
      <van-grid-item>
        <div class="nav_item" v-login="'/consumption'">
          <img src="../../assets/img/wallet.png" alt="" srcset="" />
          <div class="nav_title">账户明细</div>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div class="nav_item" @click="handleNav('/wencai')">
          <img src="../../assets/img/dt.png" alt="" srcset="" />
          <div class="nav_title">问财</div>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div class="nav_item" v-login="'/recharge'">
          <van-badge content="Hot">
            <img src="../../assets/img/cz.png" alt="" srcset="" />
          </van-badge>
          <div class="nav_title">充值中心</div>
        </div>
      </van-grid-item>
      <!-- <van-grid-item>
        <div class="nav_item" v-login="'/game'">
          <van-badge >
            <img src="../../assets/img/mncg.png" alt="" srcset="" />
          </van-badge>
          <div class="nav_title">炒股大赛</div>
        </div>
      </van-grid-item> -->
      <van-grid-item>
        <div class="nav_item" v-login="'/set'">
          <img src="../../assets/img/set.png" alt="" srcset="" />
          <div class="nav_title">设置</div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>

  <openVip ref="openVip"></openVip>
</template>


<script >
import { defineComponent, getCurrentInstance, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import storage from "@/utils/storage";
import { getvipTime } from "@/api/common";
import { formatDateTime } from "@/utils";
import openVip from "./comps/openVip.vue";
export default defineComponent({
  components: {
    openVip,
  },
  setup() {
    const router = useRouter();
    const user = ref(
      JSON.parse(storage.getStorage("v3_userinfo_mobile")) || null
    );
    const { proxy } = getCurrentInstance();
    const endTime = ref();

    onMounted(async () => {
      if (user.value) {
        const res = await getvipTime({ type: 1 });
        endTime.value = formatDateTime(res.endTime);
      }
    });

    const handleNav = (path) => {
      if (path) {
        router.push(path);
      } else {
        Toast.fail("功能开发中...");
      }
    };

    const openVip = ref();
    const handleOpenVip = () => {
      openVip.value.show = true;
    };
    return {
      user,
      endTime,
      openVip,
      handleNav,
      handleOpenVip,
    };
  },
});
</script>



<style scoped lang='scss'>
.my_page {
  .user_info {
    height: 280px;
    margin-bottom: 20px;
    width: 100%;
    margin: 0 auto;
    background: url("../../assets/img/bg.png");
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    img {
      position: absolute;
      width: 90%;
      height: 180px;
      left: 5%;
      top: 90px;
    }
    .user_base {
      display: flex;
      font-size: 16px;
      color: #fff;
      margin: 20px 30px;
      .txt {
        margin-left: 20px;
        text-align: left;
        .user_nick {
          font-size: 18px;
        }
        .useracc {
          font-size: 14px;
          margin-top: 10px;
        }
      }
    }
    .card_title {
      z-index: 100;
      position: absolute;
      top: 35%;
      left: 14%;
      color: #2e353d;
      font-size: 20px;
      span{
    

        font-size: 12px;
        color: #f8f8f5;
          color: #2e353d;
      }
    }
    .overtime {
      z-index: 100;
      position: absolute;
      top: 76%;
      left: 14%;
      color: #f6e1b8;
      font-size: 14px;
    }
    .open_btn {
      z-index: 100;
      position: absolute;
      top: 75%;
      left: 68%;
      background: #714805a3;
      color: #fff;
      font-size: 14px;
      width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 25px;
    }
  }
  .nav_item {
    text-align: center;
    img {
      width: 35px;
      height: 35px;
    }
    .nav_title {
      font-size: 14px;
      color: #ddb888;
    }
  }
}
</style>